{% extends "bootstrap/base.html"  %}
{%- block head %}
<title>ToDoList</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

{%- block styles %}
<!-- Bootstrap -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="{{url_for('static', filename='login.css')}}">
{%- endblock styles %}
{%- endblock head %}
{% block body -%}

{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}" style="text-align: center;width: 100%; margin-bottom: 5px;">
    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
    <strong>{{ message }}</strong>
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="container px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto" style="width: 50%;">
    <form action="/user/register" method="post">
        <div class="card card0 border-0" style="height: 480px;">
            <div class="row d-flex">
                <div class="col-lg-6">
                    <h3 align="center">创建账号</h3>
                    <div class="card1 pb-5">
                        <div class="row px-3 justify-content-center mt-4 mb-5 border-line"> 
                            <img src="/static/image/login.png" class="image" style="margin-top: 30px; height: 320px;"> </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card2 card border-0 px-4 py-5">
                        <div class="row px-3">
                            <label class="mb-1">
                                <h6 class="mb-0 text-sm">用户名</h6>
                            </label>
                            <input required class="mb-4" type="text" name="username" placeholder="请输入用户名">
                        </div>
                        <div class="row px-3">
                            <label class="mb-1">
                                <h6 class="mb-0 text-sm">密码</h6>
                            </label>
                            <input required type="password" name="password" placeholder="请输入密码"> </div>
                        <div class="row px-3">
                            <label class="mb-1">
                                <h6 class="mb-0 text-sm">确认密码</h6>
                            </label>
                        <input required type="password" name="password2" placeholder="请输入确认密码"> </div>
                        <div class="row px-3">
                            <label class="mb-1">
                                <h6 class="mb-0 text-sm">邮箱</h6>
                            </label>
                            <input required type="text" name="mailbox" placeholder="请输入邮箱地址"> </div>
                        <div class="row mb-3 px-3">
                            <button type="submit" class="btn btn-blue text-center">注册</button>
                        </div>
                        <div class="row mb-4 px-3">
                            <small class="font-weight-bold">已有账户? <a class="text-danger"
                                    href="/user/login">登录</a></small> </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

{%- endblock body %}